<template>
    <div id="mini-noise"/>
</template>

<script setup>
import * as echarts from 'echarts';
import {onMounted, reactive} from "vue";

import { toRefs, defineProps } from 'vue'       //接受消息所用的组件
const props = defineProps({               //定义props变量的属性
    //子组件接收父组件传递过来的值
    info: String,
    data: {
        type: Object,
        default: {}
    }
})
//使用父组件传递过来的值
const info =toRefs(props)                       //接受父组件传递过来的值


//设置控制图表大小变量
const setEchartWH = reactive({
    width: '400px',
    height: '400px'
});

onMounted(()=> {
    //如果有传递过来的值，就该表图表的数据
    if(info.data.value.width !== null && info.data.value.height !== null){
        //接受父组件传过来的值，改变图表的大小
        // console.log('info',info.data.value)
        setEchartWH.width = info.data.value.width
        setEchartWH.height = info.data.value.height
    }
    //如果没有不改变图标的大小，正常显示

    //开始绘图
    draw(setEchartWH);
})
function draw(setEchartWH){

    var chartDom = document.getElementById('mini-noise');
    var myChart = echarts.init(chartDom,null,setEchartWH);
    var option;

    var xAxisData = [];
    var data1 = [];
    var data2 = [];
    for (var i = 0; i < 100; i++) {
        xAxisData.push(i);
        data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
        data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
    }
    option = {
        title: {
            text: 'Bar Animation Delay',
            show:false
        },
        legend: {
            data: ['今天', '昨天'],
            top:'40px'
        },
        toolbox: {
            //y: 'bottom',
            show:false,
            feature: {
                magicType: {
                    type: ['stack']
                },
                dataView: {},
                saveAsImage: {
                    pixelRatio: 2
                }
            }
        },
        tooltip: {},
        xAxis: {
            data: xAxisData,
            splitLine: {
                show: false
            }
        },
        yAxis: {},
        series: [
            {
                name: '今天',
                type: 'bar',
                data: data1,
                emphasis: {
                    focus: 'series'
                },
                animationDelay: function (idx) {
                    return idx * 10;
                }
            },
            {
                name: '昨天',
                type: 'bar',
                data: data2,
                emphasis: {
                    focus: 'series'
                },
                animationDelay: function (idx) {
                    return idx * 10 + 100;
                }
            }
        ],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
            return idx * 5;
        }
    };

    option && myChart.setOption(option);

}
</script>

<style scoped>

</style>